<template>
    <div class="Bidding-feedback" v-show="showFeedback">
      <div class="feedback-header">
        <span>{{feedbackName}}</span>
        <i class="el-icon-close" @click="hideFeedback"></i>
      </div>
      <div class="feedback-body">
        <h3>请选择有误的信息（可多选）</h3>
        <el-checkbox-group
          v-model="checkedCheckbox">
          <el-checkbox v-for="checkbox in checkboxOptions" :label="checkbox" :key="checkbox">{{checkbox}}</el-checkbox>
        </el-checkbox-group>
        <div class="others">
          <p>其他</p>
          <textarea
            type="text"
            class="textarea"
            v-model="feedbackContent"
            @focus="textAreaInfo = false"
            :placeholder="$t('feedback.description')"></textarea>
          <span>{{contentLen}}/{{contentMaxLen}}</span>
        </div>
        <div class="showInfo">
          <span v-show="textAreaInfo">{{$t('feedback.contentInfo2')}}</span>
        </div>
      </div>
      <div class="feedback-foot">
        <div class="submitBtn" @click="submitFeedback">{{$t('feedback.submit')}}</div>
      </div>
    </div>
</template>

<script>
    export default {
      name: "BiddingFeedback",
      props: ['showFeedback', 'feedbackName','checkboxOptions'],
      data(){
          return {
            // checkboxOptions: ['中标编号', '采购单位名称', '中标供应商'],
            checkedCheckbox: [],
            textAreaInfo: false,
            contentLen: '0',
            contentMaxLen: '50',
            feedbackContent: '',
            feedback: false
          }
      },
      watch: {
        feedbackContent(value) {
          this.contentLen = value.length;
          if (value.length >= Number(this.contentMaxLen)) {
            this.feedbackContent = this.feedbackContent.substring(0, Number(this.contentMaxLen))
          }
          if (value.length === 0) {
            this.textAreaInfo = true
          } else {
            this.textAreaInfo = false
          }
        }
      },
      methods: {
        submitFeedback(){
          this.textAreaInfo=false;
            let params={
              selFeedback:this.checkedCheckbox,
              feedbackStr:this.feedbackContent.trim()
            };
            if(params.selFeedback.length===0&&params.feedbackStr===''){
               this.textAreaInfo=true;
               return ;
            }
          this.$emit('hideFeedback',params)
        },
        hideFeedback(){
          this.textAreaInfo=false;
          this.$emit('hideFeedback')
          // this.checkedCheckbox = []
          // this.feedbackContent = ''
          // this.contentLen = '0'
          // this.textAreaInfo = false
        }
      }
    }
</script>

<style lang="scss" scoped>
  .Bidding-feedback{
    height: 380px;
    position: fixed;
    top: 240px;
    right: 110px;
    z-index: 999;
    border-radius: 9px;
    width: 300px;
    border: 2px solid #f2f2f2;
    background: #fff;
    .feedback-header{
      padding: 0 20px;
      height:50px;
      line-height:50px;
      background: #FF9C15;
      border-radius: 9px 9px 0px 0px;
      span{
        font-family: Helvetica;
        font-size: 14px;
        color: #FFFFFF;
      }
      .el-icon-close{
        position: absolute;
        top:15px;
        right:18px;
        cursor: pointer;
        color: #FFFFFF;
        font-size:20px;
      }
    }
    .feedback-body{
      padding: 0 20px;
      h3{
        font-family: OpenSans-Bold;
        font-size: 16px;
        color: #333333;
      }
      .others {
        position: relative;
        height: 80px;
        p{
          font-family: PingFangSC-Regular;
          font-size: 14px;
          color: #666666;
        }
        .textarea {
          position: relative;
          margin-top: -5px;
          width:260px;
          height: inherit;
          border-radius: 4px;
          border:1px solid rgba(153,153,153,.3);
          resize:none;
          padding-left: 10px;
          font-size:14px;
        }
        span{
          float:right;
          color:#666;
          font-size:10px;
          position:absolute;
          bottom:-20px;
          right: 5px;
        }
        .textarea::-webkit-input-placeholder{
          padding:5px 0 0 6px;
          color:#ccc;
          font-size:14px;
        }

        .textarea::-moz-placeholder{   /* Mozilla Firefox 19+ */
          padding:5px 0 0 6px;
          color:#ccc;
          font-size:14px;
        }
        .textarea:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
          padding:5px 0 0 6px;
          color:#ccc;
          font-size:14px;
        }
        .textarea:-ms-input-placeholder{  /* Internet Explorer 10-11 */
          padding:5px 0 0 6px;
          color:#ccc;
          font-size:14px;
        }
      }
      .showInfo{
        clear:both;
        margin-top:26px;
        span{
          font-family: PingFangSC-Regular;
          font-size: 12px;
          color: #FF1E1E;
        }
      }
    }
    .feedback-foot{
      position:absolute;
      bottom:15px;
      padding: 0 20px;
      .submitBtn{
        width: 260px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        background: #FF9C15;
        cursor: pointer;
        color: #fff;
        border-radius: 4px;
      }
    }
  }
</style>
